<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom:20px"
    >
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item> 控制台 </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据汇总统计 -->
    <div class="count">
      <div
        v-for="item in count"
        :key="item.name"
      >
        {{item.name}} {{item.num}}
      </div>
    </div>
    <!-- 统计图 -->
    <div
      id="main"
      style="width:100%;height:400px"
    ></div>
  </div>
</template>

<script>
import url from '@/config/url'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      count: [],
      saleCount: []
    }
  },
  computed: {
    // 处理出横轴数据
    xdata() {
      let tmp = []
      this.saleCount.forEach((item) => {
        tmp.push(item.name)
      })
      return tmp
    },
    // 处理出纵轴数据
    ydata() {
      let tmp = []
      this.saleCount.forEach((item) => {
        tmp.push(item.num)
      })
      return tmp
    }
  },
  created() {
    this.loadCount()
    this.loadSaleCount()
  },
  mounted() {},
  methods: {
    // 统计汇总数据
    loadCount() {
      this.$http.get(url.count).then((res) => {
        // console.log(res.data)
        this.count = res.data
      })
    },
    // 销售量数据
    loadSaleCount() {
      this.$http.get(url.saleCount).then((res) => {
        console.log(res.data)
        this.saleCount = res.data
        //回调函数中数据是返回的  回调函数中调用显示图表
        this.loadPic()
      })
    },
    // 加载图表
    loadPic() {
      // 获取DOM节点 渲染图表
      var chartDom = document.getElementById('main')
      // 初始化
      var myChart = echarts.init(chartDom)
      // 图表配置
      var option = {
        // 横坐标
        xAxis: {
          type: 'category',
          // 数据
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: this.xdata
        },
        // 纵坐标
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // 数据项
            // data: [150, 230, 224, 218, 135, 147, 260],
            data: this.ydata,
            // 图表类型  line 折线图
            type: 'line'
          }
        ]
      }
      // 设置图表的选项
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.count {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  > div {
    width: 150px;
    height: 150px;
    line-height: 150px;
    color: white;
    text-align: center;
    border-radius: 50%;
  }
  > div:first-child {
    background-color: red;
  }
  > div:nth-child(2) {
    background-color: #409eff;
  }
  > div:nth-child(3) {
    background-color: #67c23a;
  }
  > div:nth-child(4) {
    background-color: #f56c6c;
  }
  > div:nth-child(5) {
    background-color: #909399;
  }
}
</style>